<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<input type="text"/>
<input type="button" value="输出"/>
<p></p>
<script>
var arr = ["red","yellow","blue","green","black"];
var aInput = document.getElementsByTagName("input");
var oP = document.getElementsByTagName("p")[0];
var aSpan = oP.getElementsByTagName("span");
aInput[1].onclick = function (){
	var str = "<span>"+aInput[0].value.split("").join("</span><span>")+"</span>";
/*	var arr1 = aInput[0].value.split("");
	var str = "";
	for(var i=0;i<arr1.length;i++){
		str += "<span>"+arr1[i]+"</span>";
	}*/
	oP.innerHTML = str;
	for(var i=0;i<aSpan.length;i++){
		aSpan[i].style.color = arr[i%5];
	}
}
</script>
</body>
</html>
